<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日期计算工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            background-color: #f5f7fa;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 20px;
            font-size: 24px;
        }

        .description {
            color: #666;
            text-align: center;
            margin-bottom: 30px;
            font-size: 14px;
        }

        .input-section {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 20px;
        }

        .input-group {
            flex: 1;
            min-width: 200px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            color: #555;
            font-weight: bold;
            font-size: 14px;
        }

        input,
        select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .quick-select {
            margin-bottom: 20px;
        }

        .quick-select h3 {
            margin-bottom: 10px;
            font-size: 16px;
            color: #555;
        }

        .quick-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .quick-button {
            padding: 8px 15px;
            background-color: #e9ecef;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.2s;
        }

        .quick-button:hover {
            background-color: #dee2e6;
        }

        .quick-button.active {
            background-color: #4a6cf7;
            color: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .calculate-btn {
            display: block;
            width: 100%;
            padding: 12px;
            background-color: #4a6cf7;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.2s;
            margin-bottom: 20px;
        }

        .calculate-btn:hover {
            background-color: #3a5ce5;
        }

        .results {
            background-color: #f8f9fa;
            border-radius: 6px;
            padding: 20px;
        }

        .result-item {
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .result-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .result-label {
            font-weight: bold;
            margin-bottom: 5px;
            color: #555;
            font-size: 14px;
        }

        .result-value {
            font-size: 16px;
            color: #333;
        }

        .calendar-view {
            margin-top: 20px;
        }

        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .calendar-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }

        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
        }

        .calendar-day-header {
            text-align: center;
            font-weight: bold;
            padding: 5px;
            color: #555;
            font-size: 12px;
        }

        .calendar-day {
            text-align: center;
            padding: 8px;
            border-radius: 4px;
            font-size: 13px;
        }

        .calendar-day.current {
            background-color: #e9ecef;
        }

        .calendar-day.target {
            background-color: #4a6cf7;
            color: white;
        }

        .business-cases {
            margin-top: 30px;
        }

        .business-cases h2 {
            margin-bottom: 15px;
            font-size: 18px;
            color: #333;
        }

        .case-item {
            background-color: #f8f9fa;
            border-left: 3px solid #4a6cf7;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 0 4px 4px 0;
            transition: all 0.2s;
            cursor: pointer;
        }

        .case-item:hover {
            background-color: #f0f2f5;
        }

        .case-item.active {
            background-color: #eef2ff;
            border-left: 3px solid #3a5ce5;
            box-shadow: 0 2px 8px rgba(74, 108, 247, 0.15);
        }

        .case-title {
            font-weight: bold;
            margin-bottom: 5px;
            color: #333;
            font-size: 15px;
        }

        .case-description {
            color: #666;
            font-size: 13px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>日期计算工具</h1>
        <p class="description">输入天数，快速计算未来日期，帮助您进行项目规划、活动安排和订单交付时间预估，修改之后点击计算日期重新计算</p>

        <div class="input-section">
            <div class="input-group">
                <label for="start-date">起始日期</label>
                <input type="date" id="start-date">
            </div>
            <div class="input-group">
                <label for="days">天数</label>
                <input type="number" id="days" min="1" value="5">
            </div>
        </div>

        <div class="quick-select">
            <h3>快速选择</h3>
            <div class="quick-buttons">
                <button class="quick-button" data-days="7">一周后</button>
                <button class="quick-button" data-days="14">两周后</button>
                <button class="quick-button" data-days="30">一个月后</button>
                <button class="quick-button" data-days="90">三个月后</button>
                <button class="quick-button" data-days="180">半年后</button>
                <button class="quick-button" data-days="365">一年后</button>
            </div>
        </div>

        <button class="calculate-btn">计算日期</button>

        <div class="results">
            <div class="result-item">
                <div class="result-label">计算结果日期</div>
                <div class="result-value" id="result-date">-</div>
            </div>
            <div class="result-item">
                <div class="result-label">距今天数</div>
                <div class="result-value" id="days-count">-</div>
            </div>
            <div class="result-item">
                <div class="result-label">星期几</div>
                <div class="result-value" id="weekday">-</div>
            </div>
        </div>

        <div class="calendar-view">
            <div class="calendar-header">
                <div class="calendar-title" id="calendar-month">2023年6月</div>
            </div>
            <div class="calendar-grid" id="calendar-grid">
                <!-- Calendar will be generated by JavaScript -->
            </div>
        </div>

        <div class="business-cases">
            <h2>业务应用场景</h2>
            <div class="case-item">
                <div class="case-title">项目规划</div>
                <div class="case-description">根据项目周期计算关键里程碑日期，帮助团队成员了解任务截止日期</div>
            </div>
            <div class="case-item">
                <div class="case-title">活动预约</div>
                <div class="case-description">计算活动预约日期，方便客户和管理人员了解活动具体举办时间</div>
            </div>
            <div class="case-item">
                <div class="case-title">订单交付</div>
                <div class="case-description">根据生产周期计算订单预计交付日期，提供给客户准确的交付时间预期</div>
            </div>
            <div class="case-item">
                <div class="case-title">会员服务期限</div>
                <div class="case-description">计算会员服务到期日期，便于提前通知客户续费或提供相关服务</div>
            </div>
        </div>
    </div>

    <script>
        // 核心日期计算函数
        const daysFromNow = (n, startDate = new Date()) => {
            let d = new Date(startDate);
            d.setDate(d.getDate() + Math.abs(n));
            return d.toISOString().split('T')[0];
        };

        // 获取星期几
        const getWeekday = (dateStr) => {
            const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            const date = new Date(dateStr);
            return weekdays[date.getDay()];
        };

        // 格式化日期为中文格式
        const formatDateCN = (dateStr) => {
            const date = new Date(dateStr);
            return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
        };

        // 生成日历视图
        const generateCalendar = (targetDate) => {
            const date = new Date(targetDate);
            const year = date.getFullYear();
            const month = date.getMonth();

            // 设置日历标题
            document.getElementById('calendar-month').textContent = `${year}年${month + 1}月`;

            const calendarGrid = document.getElementById('calendar-grid');
            calendarGrid.innerHTML = '';

            // 添加星期头部
            const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
            weekdays.forEach(day => {
                const dayHeader = document.createElement('div');
                dayHeader.className = 'calendar-day-header';
                dayHeader.textContent = day;
                calendarGrid.appendChild(dayHeader);
            });

            // 获取月份第一天和最后一天
            const firstDay = new Date(year, month, 1);
            const lastDay = new Date(year, month + 1, 0);

            // 填充月份第一天之前的空白
            for (let i = 0; i < firstDay.getDay(); i++) {
                const emptyDay = document.createElement('div');
                emptyDay.className = 'calendar-day';
                calendarGrid.appendChild(emptyDay);
            }

            // 填充日期
            const today = new Date();
            today.setHours(0, 0, 0, 0);
            const targetDay = new Date(targetDate);
            targetDay.setHours(0, 0, 0, 0);

            for (let i = 1; i <= lastDay.getDate(); i++) {
                const dayElement = document.createElement('div');
                dayElement.className = 'calendar-day';
                dayElement.textContent = i;

                const currentDate = new Date(year, month, i);
                currentDate.setHours(0, 0, 0, 0);

                if (currentDate.getTime() === today.getTime()) {
                    dayElement.classList.add('current');
                }

                if (currentDate.getTime() === targetDay.getTime()) {
                    dayElement.classList.add('target');
                }

                calendarGrid.appendChild(dayElement);
            }
        };

        // 初始化日期输入框为今天
        document.addEventListener('DOMContentLoaded', () => {
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('start-date').value = today;
            // calculateDate(); // 初始计算

            // 默认选中"一周后"按钮
            const defaultButton = document.querySelector('.quick-button[data-days="7"]');
            if (defaultButton) {
                defaultButton.classList.add('active');
                document.getElementById('days').value = 7;
                // calculateDate();
            }
        });

        // 计算日期并更新UI
        function calculateDate() {
            const startDateInput = document.getElementById('start-date').value;
            const days = parseInt(document.getElementById('days').value) || 0;

            if (!startDateInput) return;

            const startDate = new Date(startDateInput);
            const resultDate = daysFromNow(days, startDate);

            // 更新结果显示
            document.getElementById('result-date').textContent = formatDateCN(resultDate);
            document.getElementById('days-count').textContent = `${days}天`;
            document.getElementById('weekday').textContent = getWeekday(resultDate);

            // 生成日历视图
            generateCalendar(resultDate);
        }

        // 绑定计算按钮事件
        document.querySelector('.calculate-btn').addEventListener('click', calculateDate);

        // 绑定快速选择按钮事件
        document.querySelectorAll('.quick-button').forEach(button => {
            button.addEventListener('click', () => {
                // 移除所有按钮的active类
                document.querySelectorAll('.quick-button').forEach(btn => {
                    btn.classList.remove('active');
                });
                // 为当前点击的按钮添加active类
                button.classList.add('active');

                const days = parseInt(button.getAttribute('data-days'));
                document.getElementById('days').value = days;
                // calculateDate();
            });
        });

        // 绑定输入框变化事件
        // document.getElementById('start-date').addEventListener('change', calculateDate);
        // document.getElementById('days').addEventListener('input', calculateDate);

        // 业务场景示例功能
        const businessCases = {
            '项目规划': {
                description: '根据项目周期计算关键里程碑日期',
                defaultDays: 90
            },
            '活动预约': {
                description: '计算活动预约日期',
                defaultDays: 14
            },
            '订单交付': {
                description: '根据生产周期计算订单预计交付日期',
                defaultDays: 30
            },
            '会员服务期限': {
                description: '计算会员服务到期日期',
                defaultDays: 365
            }
        };

        // 为业务场景添加点击事件
        document.querySelectorAll('.case-item').forEach(item => {
            item.addEventListener('click', () => {
                // 移除所有业务场景的active类
                document.querySelectorAll('.case-item').forEach(caseItem => {
                    caseItem.classList.remove('active');
                });
                // 为当前点击的业务场景添加active类
                item.classList.add('active');

                const title = item.querySelector('.case-title').textContent;
                const caseInfo = businessCases[title];
                if (caseInfo) {
                    // 移除所有快速选择按钮的active类
                    document.querySelectorAll('.quick-button').forEach(btn => {
                        btn.classList.remove('active');
                    });

                    document.getElementById('days').value = caseInfo.defaultDays;
                    calculateDate();
                }
            });
        });
    </script>
</body>

</html>